<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;

      position: absolute;
      left: 0;
      top: 0;

      transition: all 1s linear;
    }

    p {
      width: 300px;
      height: 300px;
      background-color: orange;

      position: absolute;

      left: 500px;
      top: 500px;
      transition: all 1s linear;
    }
  </style>
</head>
<body>
  <!-- 让div加上这个属性才可以被拖拽 事件才可以触发   -->
  <div draggable="true"></div>
  <p></p>
 <script>
    /*
      拖拽事件
        + 在浏览器内元素发生了拖拽行为以后触发的事件
        + 注意:
          => 拖拽其实有可能关联两个元素
            -> 拖拽元素(你正在拖着的元素)
            -> 拖放元素(你将要松手的时候放置的元素)
          => 该元素需要可被拖拽, 才可以触发
        + 如何让一个元素可以被拖拽
          => 给元素设置一个属性 draggable="true"
    */


    /* 
      拖拽事件    
          dragstart   开始拖拽  

          drag   拖着移动 

          dragend     拖拽结束

      拖放事件 
    
    // dragenter 进入目标  一点进去也触发  光标进入
    // dragleave 离开目标   光标离开 
    // dragover 完全进入  (光标完全进入 )
    // drop 在目标元素松手 
    // 想要实现 在目标元素放手  那么 需要在dragover事件中阻止默认行为
    //  使用 return false 阻止默认行为
    // 因为要消除 dragover对drop 的影响  
    
    */

    // var divele = document.querySelector('div');

    // divele.ondragstart = function(){
    //   console.log('开始拖拽')
    // }

    // divele.ondrag = function(){
    //   console.log('拖拽移动')
    // }

    // divele.ondragend = function(){
    //   console.log('拖拽结束')
    // }


    // // 上面三个事件触发的前提是 元素必须有draggable="true"的属性 

    // var pele =  document.querySelector('p');
    // pele.ondragenter = function(){
    //   console.log('它进来了')
    // }

    // pele.ondragleave = function(){
    //   console.log('它离开了')
    // }

    // pele.ondragover = function(){
    //   // console.log('test')
    //   return  false
    // }


    // pele.ondrop = function(){
    //   console.log('蓝色的框在我的里边放手了 ')
    // }



    //需求   拖动蓝色的  移动到 黄色的里边 完全进入以后 松手 蓝黄交换位置  
    // 如何实现交换位置  
    // 获取两个元素的  left  top  然后相交换  
    var divele = document.querySelector('div');
    var pele =  document.querySelector('p');

    divele.ondragstart = function(){
      console.log('开始拖拽')
    }

    divele.ondrag = function(){
      console.log('拖拽移动')
    }

    divele.ondragend = function(){
      console.log('拖拽结束')
    }


    pele.ondragover = function(){
      console.log('它来了来了')
      return  false
    }


    pele.ondrop = function(){
        // 在松手的时候  获取元素的left 和 top 完成交换  
        // 获取内联的样式  用 window.getComputedStyle('元素').样式名;
        var left = window.getComputedStyle(divele).left;
        var top = window.getComputedStyle(divele).top;

        divele.style.left =  window.getComputedStyle(pele).left;
        divele.style.top =  window.getComputedStyle(pele).top;
        

        pele.style.left = left;
        pele.style.top = top;


    }

 </script>
</body>

</html>
